{extend name="index/layout" /}

{block name="head"}
<link rel="stylesheet" href="/static/css/user.css?v=1">
<meta name="robots" content="noindex">
{/block}

{block name="content"}
<div class="user-center-container">
    <!-- 用户头部 -->
    <div class="user-header generate-desktop">
        <h1 class="text-2xl font-bold mb-2">我產生的電腦桌布</h1>
        <p class="opacity-90">管理您產生的電腦桌布</p>
    </div>

    <!-- 导航链接 -->
    <div class="nav-links">
        <a href="/user/generateDesktop" class="nav-link active generate-desktop">電腦桌布生成</a>
        <a href="/user/generateMobile" class="nav-link">手機桌布生成</a>
        <a href="/user/desktopFavorites" class="nav-link">電腦桌布收藏</a>
        <a href="/user/mobileFavorites" class="nav-link">手機桌布收藏</a>
        <a href="/user/desktopDownloads" class="nav-link">電腦桌布下載</a>
        <a href="/user/mobileDownloads" class="nav-link">手機桌布下載</a>
    </div>

    <!-- 内容容器 -->
    <div class="content-container">

        {if $wallpapers}
            <div class="wallpaper-grid desktop">
                {volist name="wallpapers" id="wallpaper"}
                <div class="wallpaper-card" data-id="{$wallpaper.id}">
                    <div class="wallpaper-image desktop">
                        <img src="{$wallpaper.generated_image}" alt="{$wallpaper.prompt_text}" loading="lazy">
                        <div class="wallpaper-prompt">{$wallpaper.prompt_text}</div>
                    </div>
                    
                </div>
                {/volist}
            </div>
        {else}
            <div class="empty-state">
                <i class="fas fa-image"></i>
                <h3 class="text-lg font-semibold mb-2">還沒有產生任何電腦桌布</h3>
                <p class="text-gray-500 mb-4">去生成一些美麗的電腦桌布吧！</p>
                
            </div>
        {/if}
    </div>
</div>

<!-- 桌布预览弹层 -->
<div id="wallpaper-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
    <div class="relative bg-white rounded-lg max-w-4xl w-full mx-4 overflow-hidden">
        <div class="absolute top-4 right-4 z-10">
            <button id="close-modal" class="text-white bg-black bg-opacity-50 rounded-full w-10 h-10 flex items-center justify-center hover:bg-opacity-70 transition duration-200">
                <i class="fas fa-times"></i>
            </button>
        </div>
        
        <div class="p-4 bg-gray-100">
            <div id="image-container" class="relative bg-black flex items-center justify-center">
                <img id="modal-image" src="" alt="" class="max-w-full max-h-[70vh] object-contain">
            </div>
            
            <div class="p-4">                
                <div class="flex space-x-3">
                    <a id="download-btn" href="#" download class="flex-1 bg-primary text-white text-center py-3 rounded-lg font-bold hover:bg-primary-dark transition duration-300">
                        <i class="fas fa-download mr-2"></i> 下載
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    $(document).ready(function() {
        // 点击桌布项显示弹层
        $('.wallpaper-card').click(function() {
            const imageSrc = $(this).find('img').attr('src');
            const prompt = $(this).find('.wallpaper-prompt').text();
            
            // 设置弹层内容
            $('#modal-image').attr('src', imageSrc);
            $('#download-btn').attr('href', imageSrc);
            
            // 显示弹层
            $('#wallpaper-modal').removeClass('hidden');
            $('body').addClass('overflow-hidden');
        });
        
        // 关闭弹层
        $('#close-modal').click(function() {
            $('#wallpaper-modal').addClass('hidden');
            $('body').removeClass('overflow-hidden');
        });
        
        // 点击弹层背景关闭
        $('#wallpaper-modal').click(function(e) {
            if (e.target === this) {
                $('#wallpaper-modal').addClass('hidden');
                $('body').removeClass('overflow-hidden');
            }
        });
    });
</script>
{/block}

{block name="style"}
<style>
    /* 电脑桌布预览样式 */
    #image-container {
        aspect-ratio: 16/9;
        background-color: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }
    
    #modal-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
</style>
{/block} 